<template>
  <div ref="FundsPlanDetail" class="_wz_FundsPlanDetail">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="130">
      <Row>
        <i-col span="24">
          <i-col span="8">
            <FormItem label="运输企业">
              <i-input v-model="formData.deptName" placeholder="--" disabled/>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="计划年份">
              <i-input v-model="formData.planYear" placeholder="--" disabled/>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="登记人">
              <i-input v-model="formData.planRegistrantName" placeholder="--" disabled/>
            </FormItem>
          </i-col>
        </i-col>

        <i-col span="8">
          <FormItem label="去年营业额（万）">
            <i-input v-model.number="formData.planIncome" placeholder="--" disabled/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="费用提取标准">
            <i-input v-model.number="formData.planStandardPercent" placeholder="--" disabled/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="计提安全费用（万）">
            <i-input v-model.number="formData.planExtractAmount" placeholder="--" disabled/>
          </FormItem>
        </i-col>
        <i-col span="24">
          <FormItem label="图片上传">
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!planImgFile.imgUrl?apiUrl.imgUrl+planImgFile.imgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <Table stripe highlight-row ref="table" :loading="tableLoading" border :columns="columns2" :data="formData.planItemList"></Table>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>
  </div>
</template>
<script>
  export default {
    //modify 修改 add 新增
    // 需要修改的数据  表单类型  打开方式
    props: ["selectdata"],//接收来自父组件的数据
    data() {
      return {
        //缩略图
        visible: false,
        imgSrc: "",
        tableLoading: true,
        columns2: [
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '安全费用名目', minWidth: 180, key: 'planItemName'},
          {title: '计划使用额（万）', minWidth: 180, key: 'planItemAmount'},
          {title: '备注', minWidth: 180, key: 'planItemRemark'},
        ],

        formData: {},//表单数据
        goal: [{"planItemName": "", "planItemAmount": "", "planItemRemark": ''}],//动态安全费用名目
        planImgFile: {
          data: null,
          imgUrl: ''
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;


      that.axios.get(that.apiUrl.safetyBudgetPlanInfo + that.selectdata.id)
      .then(res => {
        if (!!res) {
          that.formData = res.data.data;//表单
          that.planImgFile.imgUrl = !!that.formData.planImg ? that.formData.planImg : '';
          that.goal = that.formData.planItemList;
          that.tableLoading = false;
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    methods: {//执行的方法
      //缩略图查看
      handleView(src) {
        this.imgSrc = src;
        this.visible = true;
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_FundsPlanDetail {

    .demo-upload-list {
      display: inline-block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 40px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }

    .ivu-input[disabled] {
      /*background: #fff !important;*/
      color: #666;
    }
  }


</style>
